<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时数据监控面板</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .styled-table {
            width: 100%;
            border-collapse: collapse;
            margin: 25px 0;
            font-size: 0.9em;
            font-family: sans-serif;
            min-width: 400px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
        }
        .styled-table thead tr {
            background-color: #009879;
            color: #ffffff;
            text-align: left;
        }
        .styled-table th,
        .styled-table td {
            padding: 12px 15px;
        }
        .styled-table tbody tr {
            border-bottom: 1px solid #dddddd;
        }
        .styled-table tbody tr:nth-of-type(even) {
            background-color: #f3f3f3;
        }
        .styled-table tbody tr:last-of-type {
            border-bottom: 2px solid #009879;
        }
        .styled-table tbody tr.active-row {
            font-weight: bold;
            color: #009879;
        }
    </style>
</head>
<body>
    <div class="container">
        
        <div class="controls">
            <button id="startBtn" class="btn">开始自动刷新</button>
            <button id="stopBtn" class="btn stop">停止刷新</button>
            <button id="refreshBtn" class="btn">手动刷新</button>
        </div>
        
        <div class="status">
            <div class="status-indicator" id="statusIndicator"></div>
            <span id="statusText">状态: 已停止</span>
            <select id='select_type'>
                <option value="豆瓣">豆瓣</option>
            </select>

            <select id='select_level'>
                <option value="all">all</option>
                <option value="DEBUG">DEBUG</option>
                <option value="INFO">INFO</option>
                <option value="WARNING">WARNING</option>
                <option value="ERROR">ERROR</option>
                <option value="CRITICAL">CRITICAL</option>
            </select>

        </div>
        <div>
            <div class="last-update" id="lastUpdate">
            最后更新时间: 尚未更新
            </div>
        </div>
        
        
            <table id="dataTable" class="styled-table">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>时间</th>
                        <th>级别</th>
                        <th>模块</th>
                        <th>信息</th>
                        <th>异常</th>
                        <th>线程</th>
                        <th>进程</th>
                        <th>类型</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td colspan="6" class="loading">
                            <div class="spinner"></div>
                            正在加载数据...
                        </td>
                    </tr>
                </tbody>
            </table>
     

      
    </div>
    <script>
        type='豆瓣';
        level='all';

    </script>

    <script>
        $(document).ready(function() {
            let refreshInterval;
            const refreshRate = 5000; // 5秒刷新一次
            let isActive = false;
            
            // 元素引用
            const $statusIndicator = $('#statusIndicator');
            const $statusText = $('#statusText');
            const $lastUpdate = $('#lastUpdate');
            const $tableBody = $('#dataTable tbody');
            
            // 更新状态显示
            function updateStatus(active) {
                isActive = active;
                if (active) {
                    $statusIndicator.removeClass('inactive');
                    $statusText.text('状态: 运行中 (每5秒刷新)');
                } else {
                    $statusIndicator.addClass('inactive');
                    $statusText.text('状态: 已停止');
                }
            }
            
            // 格式化时间
            function formatTime(date) {
                return new Date(date).toLocaleTimeString();
            }
            
            // 更新最后刷新时间
            function updateLastRefreshTime() {
                const now = new Date();
                $lastUpdate.text(`最后更新时间: ${now.toLocaleTimeString()}`);
            }
            
            // 获取随机数据
            function generateRandomData() {
                var type = $('#select_type option:selected').val();
                var level = $('#select_level option:selected').val();
              
                list={}
                $.ajax({
                        url: "index",          // 必填
                        type: "GET",        // 请求方式
                        async: false,
                        dataType: "json",
                        data:{"type":type,"level":level},       
                        success: function(data){ // 成功回调
                            list=data
                            console.log(data);
                        },
                        error: function(xhr){    // 失败回调
                            console.log(xhr.status);
                        }
                });
               
                
                return list;
            }
            
            // 获取数据（模拟AJAX请求）
            function fetchData() {
                return new Promise((resolve) => {
                    // 模拟网络延迟
                    setTimeout(() => {
                        resolve({
                            data: generateRandomData(),
                            timestamp: new Date().toISOString()
                        });
                    }, 800);
                });
            }
            
            // 渲染表格
            function renderTable(data) {
                $tableBody.empty();
                response=data.data;

                
                $.each(response, function(index, item) {
                    // 根据状态设置颜色
                    let statusClass = '';
                    if (item.level === 'DEBUG'){ 
                        statusClass = 'color: #9E9E9E;';
                    }
                    if (item.level === 'INFO'){ 
                        statusClass = 'color: #2196F3;';
                    }
                    if (item.level === 'WARNING'){ 
                        statusClass = 'color: #FFC107;';
                    }
                    if (item.level === 'ERROR'){
                        statusClass = 'color: #F44336;';
                    }
                    if (item.level === 'CRITICAL'){ 
                        statusClass = 'color: #9C27B0 ;';
                    }
                    console.log("asdlfjsaldjkf");
                    console.log(statusClass);
                    console.log("asdlfjsaldjkf");
                    
                    const $row = $('<tr>').append(
                        $('<td>').text(item.id),
                        $('<td>').text(item.timestamp),

                        $('<td>').html(`<span style="${statusClass}">${item.level}</span>`),
                        $('<td>').text(item.module),
                        $('<td>').text(item.message),
                        $('<td>').text(item.exception),
                        $('<td>').text(item.thread),
                        $('<td>').text(item.process),
                        $('<td>').text(item.type),
                    );
                    
                    $tableBody.append($row);
                });
                
                // 添加更新动画效果
                $tableBody.find('td').addClass('updated-cell');
                setTimeout(() => {
                    $tableBody.find('td').removeClass('updated-cell');
                }, 1000);
                
                updateLastRefreshTime();
            }
            
            // 加载数据
            function loadData() {
                // 显示加载状态
                $tableBody.html('<tr><td colspan="6" class="loading"><div class="spinner"></div>正在获取最新数据...</td></tr>');
                
                fetchData().then(response => {
                    renderTable(response.data);
                }).catch(error => {
                    $tableBody.html(`<tr><td colspan="6" style="text-align: center; color: #e74c3c;">数据加载失败: ${error.message}</td></tr>`);
                });
            }
            
            // 初始化
            function init() {
                loadData();
                updateStatus(false);
            }
            
            // 开始自动刷新
            function startAutoRefresh() {
                if (isActive) return;
                
                updateStatus(true);
                loadData(); // 立即加载一次
                refreshInterval = setInterval(loadData, refreshRate);
            }
            
            // 停止自动刷新
            function stopAutoRefresh() {
                updateStatus(false);
                clearInterval(refreshInterval);
            }
            
            
            // 按钮事件绑定
            $('#startBtn').click(startAutoRefresh);
            $('#stopBtn').click(stopAutoRefresh);
            $('#refreshBtn').click(loadData);
            $('#select_type').click(loadData);
            $('#select_level').click(loadData);
            
            // 初始化页面
            init();
        });


    </script>
</body>
</html>
